<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tex4</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		input{
			display: block;
		}
	</style>
</head>
<body id="box">
	<input type="button" value="出现吧!" onclick="demo(this.value)">
	<input type="button" value="消失吧!" onclick="demo(this.value)">
</body>
</html>

<script>
	function demo(value){	
		var body = document.getElementById('box');
		var str = '<input type="button" value="出现吧!" onclick="demo(this.value)"><input type="button" value="消失吧!" onclick="demo(this.value)">';
		if (value == '出现吧!') {
			for (var i = 0; i < 5; i++) {
				str += '<div class="box1"></div>'
			}
		}

		body.innerHTML = str;

		var box1 = document.getElementsByClassName('box1');
		for (var i = 0; i < box1.length; i++) {
			box1[i].style.background = 'url(img/' + (i+1) + '.png)';
			if (i < (box1.length / 2)) {
				box1[i].style.margin = (i*100) + 'px 0px 0px 0px';
			}else{
				box1[i].style.margin = ((box1.length-i-1)*100) + 'px 0px 0px 0px';
			}
		}
	}

</script>